<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		li{
			width: 150px;
			list-style-type: none;
		}
		.hover{
			background-color: pink !important;
		}
	</style>
	<script src="jquery-3.6.0.js"></script>
	<body>
<!-- 		1. 隔行变色加高亮显示
		   仿课堂练习，自己制作一个列表，隔行变色，外加高亮显示。
		   - 颜色自定义
		   - 鼠标进入后，另外一个颜色来高亮显示，移开后恢复原颜色。
		   - 高亮显示时，如果背景色颜色较深，建议将文本颜色设置为白色或其他可以形成鲜明对比的颜色。
		   > 鼠标事件，可以使用mouseover事件，或者hover事件。请自行查看api文档，先自学了解。 -->
		   <div>
		   	<ul class="a1">
		   		<li>我是第1个li</li>
		   		<li>我是第2个li</li>
		   		<li>我是第3个li</li>
		   		<li>我是第4个li</li>
		   		<li>我是第5个li</li>
		   		<li>我是第6个li</li>
		   	</ul>
		   </div>
	</body>
		<script type="text/javascript">
			$('ul.a1 :nth-child(even)').css('background-color', 'lightgrey');
			$('ul li').hover(function(){
				$(this).toggleClass('hover');
			})
		</script>
</html>
